<template>
  <div class>
    <crumbs attribute1="商品管理" attribute2="添加商品"></crumbs>

    <el-card shadow="hover" style="margin-top: 30px">
      <el-alert title="添加商品信息" type="info" center :closable="false" show-icon></el-alert>

      <!-- 步骤条 -->
      <el-steps :active="active*1" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <!-- 左边tab -->
      <el-form
        :model="addGoodsData"
        :rules="addGoodsRules"
        ref="addGoodsRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-tabs
          tab-position="left"
          v-model="active"
          :before-leave="beforeleave"
          @tab-click="handleClick"
        >
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="addGoodsData.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="addGoodsData.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="addGoodsData.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="addGoodsData.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <!-- 级联选择器 -->
              <el-cascader
                v-model="arr"
                :options="optionsData"
                :props="peizhixiang"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品参数" name="1">
            <!-- 渲染动态参数 -->
            <el-form-item v-for="item in dynamicarr" :key="item.attr_id" :label="item.attr_name">
              <el-checkbox-group v-model="item.attr_vals">
                <el-checkbox v-for="(item2, index) in item.attr_vals" :key="index" :label="item2"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品属性" name="2">
            <el-form-item v-for="item in staticarr" :key="item.attr_id" :label="item.attr_name">
              <el-input v-model="item.attr_vals"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane name="3" label="商品图片">
            <!-- :on-preview="handlePreview"
            :on-remove="handleRemove"-->
            <el-upload
              class="upload-demo"
              action="http://www.ysqorz.top:8888/api/private/v1/upload"
              :headers="Headers"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane name="4" label="商品内容">
            <quill-editor id="quill-editor" v-model="addGoodsData.goods_introduce"></quill-editor>
            <el-button class="btn" type="primary" @click="addGoodsOk">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import _ from 'lodash'
import { GoodList, getGoodsParamsList,addGoodsApi } from "@/http/api";
export default {
  data() {
    return {
      addGoodsData: {
        //商品名称
        goods_name: "",
        //商品价格
        goods_price: 0,
        //商品分类,以为','分割的字符串分类列表
        goods_cat: "",
        //商品数量
        goods_number: 0,
        //商品参数，包括动态和静态参数数组
        attrs: [],
        //商品重量
        goods_weight: 0,
        //上传图上路径组成的数组
        pics: [],
        //商品介绍-富文本信息
        goods_introduce: ""
      },
      //设置上传的请求头
      Headers: {
        Authorization: sessionStorage.getItem("token")
      },
      arr: [],
      active: "0",
      idArr: [],
      ADDgoodsForm: {
        goods_name: "",
        goods_price: "",
        goods_weight: "",
        goods_number: ""
      },
      addGoodsRules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
          {
            pattern: /^[0-9]*$/,
            message: "请输入数字",
            trigger: "blur"
          }
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
          {
            pattern: /^[0-9]*$/,
            message: "请输入商品重量",
            trigger: "blur"
          }
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
          {
            pattern: /^[0-9]*$/,
            message: "请输入商品数量",
            trigger: "blur"
          }
        ]
      },
      optionsData: [],
      peizhixiang: {
        expandTrigger: "hover",
        label: "cat_name",
        children: "children",
        value: "cat_id"
      },
      dynamicarr: [],
      staticarr: []
    };
  },
  mounted() {},
  created() {
    this.getData();
  },
  methods: {
    async addGoodsOk() {
      this.addGoodsData.goods_cat = this.arr.join(',')
      // 处理动态
      const dtParams = this.dynamicarr.map(item => {
        console.log("动态处理中...",item);
        return {
          attr_id: item.attr_id,
          attr_value: item.attr_vals.join(",")
        }
      });

      // 处理静态
      const jtParams = this.staticarr.map(item => {
        console.log("静态");
        return {
          attr_id: item.attr_id,
          attr_value: item.attr_vals
        }
      })

      // 合并
      const merParams = [...dtParams,...jtParams]

      this.addGoodsData.attrs = merParams
      const copyForms = _.cloneDeep(this.addGoodsData)
      const res = await addGoodsApi(copyForms)
      this.$router.push('/goods')
    },
    async handleClick() {
      if (this.active === "1") {
        //获取动态参数
        const res1 = await getGoodsParamsList(this.getcurrentId);
        // console.log(res1);
        res1.forEach(item => {
          item.attr_vals = item.attr_vals.split(",");
        });
        this.dynamicarr = res1;
        // console.log(res1);
      } else if (this.active === "2") {
        //获取静态参数
        const res2 = await getGoodsParamsList(this.getcurrentId, "only");
        // console.log(res2);
        this.staticarr = res2;
      }
    },
    beforeleave(activeName, oldActiveName) {
      if (oldActiveName == "0" && this.arr.length !== 3) {
        this.$message({
          message:
            "您没有选择商品分类，必须选择完商品分类之后才能进行下面的操作",
          type: "error"
        });
        return false;
      }
    },
    //选择分类内容改变时触发
    handleChange() {},
    async getData() {
      const res = await GoodList();
      console.log(res);
      this.optionsData = res;
    }
  },
  components: {},
  computed: {
    getcurrentId() {
      return this.arr[this.arr.length - 1];
    }
  }
};
</script>

<style lang='scss' scoped>
.mt16 {
  margin: 20px 0;
}
</style>
<style>
  .quill-editor {
    height: 300px;
  }
  .btn {
    margin-top: 100px;
  }
</style>
